<template>
  <div class="i-page gen-page fill-height">
    <div class="i-content white pa-0 d-flex flex-column">
      <el-space :alignment="'stretch'" direction="horizontal" fill size="large">
        <el-space>
          <el-button plain type="primary" @click="api.onCreate()">创建</el-button>
        </el-space>
        <el-table
          :data="api.tableState.dataSource"
          border
        >
          <el-table-column label="类名" prop="className" width="160" />
          <el-table-column label="表名" prop="tableName" width="200" />
          <el-table-column label="表描述" min-width="200" prop="tableComment" />
          <el-table-column :align="'center'" label="编辑字段" width="260">
            <template #default="{ row, column, $index }">
              <el-space>
                <el-button size="small" text type="primary" @click="onEdit(row.id,'field')">实体字段</el-button>
                <el-button size="small" text type="primary" @click="onEdit(row.id,'vo')">vo 字段</el-button>
                <!--                <el-button size="small" text type="primary" @click="onEdit(row.id,'dto')">dto 字段</el-button>-->
              </el-space>
            </template>
          </el-table-column>

          <el-table-column :align="'center'" fixed="right" label="操作" width="440">
            <template #default="{ row, column, $index }">
              <el-space>

                <el-button size="small" text type="primary" @click="api.onDetail(row.id)">详情</el-button>
                <el-button size="small" text type="primary" @click="api.onPreview(row.id)">预览</el-button>

                <el-dropdown>
                  <el-button size="small" text type="primary">
                    下载<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="api.onZip(row.id)">后端代码</el-dropdown-item>
                      <el-dropdown-item @click="api.onVueZip(row.id)">前端代码</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <el-dropdown>
                  <el-button size="small" text type="primary">
                    覆盖生成<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="api.onGenCode(row.id)">后端代码</el-dropdown-item>
                      <el-dropdown-item @click="api.onGenVueCode(row.id)">前端代码</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <el-button v-if="row.parentId !== '0'" size="small" text type="primary" @click="onEdit(row.id,'edit')">编辑</el-button>
                <el-button size="small" text type="danger" @click="api.onDelete(row.id)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>

        </el-table>
        <div class="d-flex justify-end">
          <el-pagination
            v-model:current-page="api.tableState.pagination.current"
            v-model:page-size="api.tableState.pagination.pageSize"
            :total="api.tableState.pagination.total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="api.refreshTable()"
            @current-change="api.refreshTable()"
          />
        </div>
      </el-space>
    </div>

    <Preview :api="api" />
    <Create :api="api" />
    <Detail :api="api" />

    <Edit v-if="state.type=='edit'" :api="api" />
    <EditField v-else-if="state.type=='field'" :api="api" />
    <EditFieldVO v-else-if="state.type=='vo'" :api="api" />
    <EditFieldDTO v-else-if="state.type=='dto'" :api="api" />
  </div>

</template>

<script lang="ts" setup>
import { GenTableApi } from "~/api/system/gen/gen.api";
import { onMounted, reactive } from "vue";
import Preview from "~/views/config/gen/Preview.vue";
import Create from "~/views/config/gen/Create.vue";
import Edit from "~/views/config/gen/Edit.vue";
import Detail from "~/views/config/gen/Detail.vue";
import EditField from "~/views/config/gen/EditField.vue";
import EditFieldVO from "~/views/config/gen/EditFieldVO.vue";
import EditFieldDTO from "~/views/config/gen/EditFieldDTO.vue";
import {ArrowDown} from '@element-plus/icons-vue';

interface Types {
  type: "edit" | "field" | "vo" | "dto";
}

const api = new GenTableApi();

const state = reactive<Types>({
  type: "edit",
});

function onEdit(id: string, type: "edit" | "field" | "vo" | "dto") {
  state.type = type;
  api.onEdit(id);
}

onMounted(() => {
  api.onListPage();
});
</script>

<style lang="scss" scoped>

</style>
